<template>
  <div>
    <v-row v-if="episode">
      <v-col :md="8">
        <v-row>
          <v-col>
            <v-select :items="items" v-model="currentIndex"></v-select>
            <video width="100%" controls :src="episode.file"></video>
          </v-col>
        </v-row>
        <div class="d-flex align-center justify-between">
          <div class="d-flex align-center">
            <LikeBtn
              type="Course"
              name="like"
              icon="mdi-thumb-up"
              title="点赞"
              :object="course._id"
              icon-color="pink"
            />
            <LikeBtn
              type="Course"
              name="collect"
              icon="mdi-heart"
              title="收藏"
              icon-color="#f1c40f"
              :object="course._id"
            />
          </div>
          <v-spacer></v-spacer>
          <Browse :id="course._id"/>
        </div>
      </v-col>
      <v-col :md="4">
        <CommentCard type="Course" :object="episode._id"/>
      </v-col>
    </v-row>
    <div v-else>
      <h3>暂无内容...</h3>
    </div>
  </div>
</template>

<script>
import LikeBtn from '~/components/LikeBtn.vue'
import CommentCard from '../../components/CommentCard.vue'
import Browse from '~/components/Browse.vue'

export default {
  async asyncData({params: {id}, $axios}) {
    const res = await $axios.$get(`/courses/${id}`, {
      params: {
        query: {
          populate: 'episodes',
        },
      },
    })
    return {
      id,
      course: res.data,
    }
  },
  data() {
    return {
      currentIndex: 0,
    }
  },
  methods: {
    async fetchBrowse() {
      const res = this.$axios.$post('actions/browsers', {
        type: 'Course',
        object: this.id,
        name: 'browse',
      })
    },
  },
  created() {
    this.fetchBrowse()
  },
  computed: {
    items() {
      return this.course.episodes.map((course, i) => ({
        text: course.name,
        value: i,
      }))
    },
    episode() {
      return this.course.episodes[this.currentIndex]
    },
  },
  components: {LikeBtn, CommentCard, Browse},
}
</script>

<style scoped lang="scss"></style>
